<template>
  <div>
    <h1>App</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment()">++</button>
    <button @click="decrement()">--</button>
    <hr />
    <button @click="incrementAsync()">Async ++</button>
    <button @click="decrementAsync()">Async --</button>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from "vuex";

export default {
  computed: {
    /**
     * this.count   => this.$store.state.count
     */
    ...mapState(["count"]),
  },

  methods: {
    /**
     * this.increment(payload) => this.$store.commit('increment', payload)
     * this.decrement(payload) => this.$store.commit('decrement', payload)
     */
    ...mapMutations(["increment", "decrement"]),

    /**
     * this.incrementAsync(payload) => this.$store.dispatch('incrementAsync', payload)
     * this.decrementAsync(payload) => this.$store.dispatch('decrementAsync', payload)
     */
    ...mapActions(["incrementAsync", "decrementAsync"]),

    fn1() {
      // 派发动作
      this.$store.dispatch("incrementAsync");
    },

    fn2() {
      // 派发动作，且传递个参数把
      this.$store.dispatch("decrementAsync", 100);
    },
  },
};
</script>
